<template>
	<view class="contacts" :style="'display:'+(isShow?'block':'none')">
		<cu-custom bgColor="bg-ededed" :isBack="false" :zIndex="997">
			<block slot="backText"></block>
			<block slot="content">通讯录</block>
 			<block slot="left">
				<view></view>
			</block>
			<block slot="right">
				<button class="cu-btn rightBtn" style="padding:20upx;" data-url="../../pages1/contacts/search" @click="$util.toPage" >
					<image style="height:100%;width:100%;display:block;" src="../../static/add-friend.png"></image>
				</button>
			</block>
		</cu-custom>
		<view class="bg-white" :style="'height:'+(winHeight-barHeight-navHeight)+'px;display:flex;position: relative;width:100%;'">
			<uv-index-list :index-list="indexList" :lstHeight="(winHeight-barHeight-navHeight)">
				<template v-slot:header>
					<view class="cu-bar search bg-ededed" style="padding:10upx 20upx;position:sticky;top:0;z-index:1;">
						<view class="search-form radius" style="margin: 0;background-color:#fff;">
							<text style="width:30upx;" class="icon-search"></text>
							<input @confirm="doSearch" @input="doSearch"  v-model="keyword" :adjust-position="false" type="text" placeholder="搜索"
							 confirm-type="search"></input>
							 <text class="icon-roundclosefill" v-if="keyword" style="font-size:38upx;" @click="clearKeyword"></text>
						</view>
					</view>
					<view class="uv-index-item">
						<view class="list">
							<view class="list__item">
								<image src="../../static/add-friends.png" style="width:70upx;height:70upx;border-radius:6upx;"></image>
								<text class="list__item__user-name">新的朋友</text>
							</view>
							<view data-url="../../pages1/group/lst" @click="$util.toPage" class="list__item">
								<image src="../../static/group.png" style="width:70upx;height:70upx;border-radius:6upx;"></image>
								<text class="list__item__user-name">群组</text>
							</view>
						</view>
					</view>			
				</template>
						<!-- #ifdef VUE2 -->
						<template v-for="(item, index) in itemArr">
						<!-- #endif -->
						<!-- #ifdef VUE3 -->
						<template v-for="(item, index) in itemArr" :key="index">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
							<!-- #endif -->
							<uv-index-item>
								<!-- #ifndef APP-NVUE -->
								<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
								<!-- #endif -->
								<view class="list" v-for="(item1, index1) in item" :key="index1">
									<view class="list__item" @click="select(index,index1)">
										<view style="position: relative;">
											<image class="list__item__avatar" :src="item1.friend.avatar+'_200'"></image>
											<!-- <view class="cu-tag badge" style="left:auto;top:-2upx;right:-2upx;" :style="'background-color:'+(item1.friend.online_status=='online'?'#39b54a':'#aaaaaa')+';'"></view> -->
										</view>
										
										<text class="list__item__user-name">{{item1.show_name}}</text>
									</view>
									<uv-line></uv-line>
								</view>
							</uv-index-item>
						</template>
						<template v-slot:footer>
							<view style="width:100%;height:100upx;" class="flex justify-center align-center text-gray">
								<text>{{totalFriend}}个好友</text>
							</view>
							<view class="cu-tabbar-height"></view>
						</template>
			</uv-index-list>
		</view>
		
		<!-- <view :style="'height:'+(winHeight-barHeight-navHeight)+'px;display:flex;position: relative;width:100%;'">
			
			<scroll-view class="scrollPage" scroll-y="true" :style="'height:'+(winHeight-barHeight-navHeight)+'px'"
			@refresherrefresh="refresh" 
			refresher-enabled="true" refresher-background="#f5f5f5" :refresher-triggered="refresher_triggered">
				<view v-if="friendLst &&friendLst.length>0">
					<view class="cu-list menu menu-avatar solid-bottom">
						<view class="cu-item solid-bottom" v-for="(item,index) in friendLst" :key="index">
							<view class="cu-avatar radius lg" :style="[{backgroundImage:'url('+item.friend.avatar+')'}]">
								<view class="cu-tag badge" style="left:auto;top:-2upx;right:-2upx;" :style="'background-color:'+(item.friend.online_status=='online'?'#39b54a':'#aaaaaa')+';'"></view>
							</view>
							<view class="content flex-direction">
								<view class="text-cut">{{item.remark || item.friend.username}}</view>
							</view>
						</view>
					</view>
					<view class="cu-tabbar-height"></view>
				</view>
			</scroll-view>
		</view> -->
	</view>
</template>

<script>
	import { random } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {mapState,mapMutations} from 'vuex';
	import util from 'common/util.js'
	import contactsObj from 'model/contactsModel.js';
	let me = null;
	let disp = require("common/broadcast");
	const indexListBase = () => {
			const indexList = []
			const charCodeOfA = 'A'.charCodeAt(0)
			for (let i = 0; i < 26; i++) {
				indexList.push(String.fromCharCode(charCodeOfA + i))
			}
			indexList.push('#')
			return indexList
		}
	export default {
		data() {
			return {
				indicator: 1,
				animation:'',
				barHeight: 0,
				refresher_triggered:false,
				friendLst:[],
				indexList: [],
				itemArr:[],
				totalFriend:0,
				keyword:''
			};
		},
		props: {
			isShow: {
				type: [Boolean, String],
				default: false
			},
		},
		created(){
			me = this;
			this.barHeight = this.CustomBar;
		},
		mounted() {
			if (this.hasLogin) {
				me.getData(0);
			}
			
		},
		computed: {
			...mapState({
				navHeight: ({
					baseModule
				}) => baseModule.navHeight,
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				hasLogin: ({
					userModule
				}) => userModule.hasLogin,
				userInfo: ({
					userModule
				}) => userModule.userInfo
			})
			
		},
		watch: {
			hasLogin(val) {
				if (val) {
					me.getData(0);
				}
			}
		},
		methods: {
			...mapMutations(['chatModule/setChatTo']),
			refresh(){
				this.refresher_triggered = true;
				this.getData(1);
			},
			getObjectKeys(object)
			  {
			    var keys = [];
			    for (var property in object){
					keys.push(property);
				}
			    return keys;
			  },
			getData(is_refresh){
				this.indexList=[];
				this.itemArr=[];
				contactsObj.friendsLst(me).then(res => {
					me.friendLst=res.list;
					me.totalFriend = res.count;
					var tree = res.tree;

					indexListBase().map(item=>{
						this.getObjectKeys(tree).forEach(key=>{
							if(item==key){
								this.indexList.push(key)
							}
						})
					})
					
					this.indexList.map(item => {
						this.itemArr.push(tree[item])
					})
					if (is_refresh) {
						uni.showToast({
							title: '刷新成功',
							image: '../../static/successed.png',
							duration: 1000
						});
					}
					me.$util.closeIndicator(me);
					me.refresher_triggered=false;
				}).catch(err => {
					if(is_refresh){
						uni.showToast({
							title: '刷新失败',
							image: '../../static/error.png',
							duration: 1000
						});
					}
					console.log(err);
				});
			},
			select(index,index1){
				var f = this.itemArr[index][index1];
				var to = {};
				to.id=f['friend_user_id'];
				to.name=f['show_name'];
				to.avatar=f['friend']['avatar'];
				to.type='friend';
				me['chatModule/setChatTo'](to);
				uni.navigateTo({
					url:"../../pages1/message/chat?friendid="+to.id+"&unread=0&msgType=friend"
				});
			},
			doSearch(){
				
			},
			clearKeyword(){
				
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/demo.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
	.list {
		
		&__item {
			@include flex;
			padding: 12upx 24upx;
			background-color: #fff;
			align-items: center;
			
			&__avatar {
				height: 70upx;
				width: 70upx;
				border-radius: 6upx;
			}
			
			&__user-name {
				font-size: 28upx;
				margin-left: 20upx;
				color: $uv-main-color;
			}
		}
		
		&__footer {
			color: $uv-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
		
	}
	.list__item,
	.list{
		position: relative;
	}
	.list__item::after,
	.uv-index-item .list::after{
		content: ' ';
		position: absolute;
		left: 114upx;
		bottom: 0;
		right: auto;
		top: auto;
		height: 1px;
		background-color: #e7e7e7;
		width: 100%;
		transform: scaleY(0.3);
		transform-origin: 0 70%;
		pointer-events: none;
		overflow: hidden;
	}
	.list__item:last-child:after,
	.uv-index-item .list:last-child:after {
		display:none
	}
	.uv-index-item{
		position: relative;
	}
	.uv-index-item::after{
		content: ' ';
		position: absolute;
		left: 25upx;
		bottom: 0;
		right: auto;
		top: auto;
		height: 1px;
		background-color: #e7e7e7;
		width: 100%;
		transform: scaleY(0.3);
		transform-origin: 0 70%;
		pointer-events: none;
		overflow: hidden;
	}
</style>
